<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>轮播图</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
     *{
	     margin:0px;
		 padding:0px;
	 }
     #div_main{
	     width:500px;
		 height:320px;
		 border:1px black solid;
		 margin:0 auto;
		 margin-top:50px;
		 overflow:hidden;
		 position:relative;
	 }
	 #div_main>#div_box{
	    width:5000px;
		height:100%;
		margin-left:-500px;
		background-color:yellow;
	 }
     #div_main>#div_box>img{
	    width:500px;
		height:100%;
		float:left;
	 }
	 #div_main>#ul_cricle{
	     position:absolute;
	     margin-left:175px;
		 bottom:15px;
	 }
	 #div_main>#ul_cricle li{
	    width:10px;
		height:10px;
		border:2px black solid;
		list-style:none;
		float:left;
		border-radius:50%;
		margin-left:6px;
	 }
     #div_main>#left,#div_main>#right{
	    width:35px;
		height:60px;
		background-color:rgba(255,255,255,0.8);
		font-size:50px;
		text-align:center;
		line-height:60px;
		position:absolute;
		top:130px;
	 }
	 #div_main>#left{
	    left:-40px;
		transition:all 0.5s linear;
	 }
     #div_main>#right{
	    right:-40px;
		transition:all 0.5s linear;
	 }
     #div_main:hover{
	    cursor:pointer;
	 }
	 #div_main>#left:hover{
		color:yellow;
	 }
	 #div_main>#right:hover{
		color:yellow;
	 }
	 #div_main:hover #left{
	    left:0px;
		transition:all 0.5s linear;
	 }
	 #div_main:hover #right{
	    right:0px;
		transition:all 0.5s linear;
	 }
     .li{
	    background-color:rgba(255,0,0,0.6);
	 }
     

  </style>
 </head>
 <body>
    <div id="div_main">
	   <div id="div_box">
          <img src="../image/image_8.jpg"></img>

	      <img src="../image/image_1.jpg"></img>
          <img src="../image/image_2.jpg"></img>
		  <img src="../image/image_3.jpg"></img>
		  <img src="../image/image_4.jpg"></img>
		  <img src="../image/image_5.jpg"></img>
		  <img src="../image/image_6.jpg"></img>
		  <img src="../image/image_7.jpg"></img>
		  <img src="../image/image_8.jpg"></img>
   
		  <img src="../image/image_1.jpg"></img>
	   </div>
	   <ul id="ul_cricle">
	      <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
	   </ul>
	   <div id="left"><</div>
	   <div id="right">></div>
	</div>
 </body>
 <script>
    var position = -500;
	var imageWidth = 500;
	var leftcClearInterval;
	var $div_box = $("#div_box");
	var $li = $("#ul_cricle li");
	var n = 0;

    $("#left").click(function(){
	    mobile(true);
	});

	$("#right").click(function(){
	    mobile(false);
	});
    
    leftClearInterval = setInterval(function(){
	    mobile(true);
	},2000);

    $("#div_main").hover(
	   function(){
	      clearInterval(leftClearInterval);
	   },
	   function(){
	      leftClearInterval = setInterval(function(){
	          mobile(true);
	      },2000);
	   }
	);

    $li.eq(n).addClass("li");
    function mobile(trueOrFalse){
	   position = trueOrFalse == true?position-imageWidth:position+imageWidth;
	   n = trueOrFalse == true?n + 1:n - 1;
	   if(position == -4500){
	  	  position = 0;
		  $div_box.css({"margin-left":position+"px","transition":"all"});
          position = -500;
		  n = 0;
	   }
	   if(position == 500){
	      position = -4000;
          $div_box.css({"margin-left":position+"px","transition":"all"});
          position = -3500;
		  n = 7;
	   }
       setTimeout(function(){
	      $div_box.css({"margin-left":position+"px","transition":"all 1s linear"});
	   },0);
	   $li.removeClass("li").eq(n).addClass("li");
	}
     
 </script>
</html>
